<template>
    <div class="monitoring-point-container">
        <!-- 标题组件 -->
        <Title :title="title"></Title>
        <!-- 折线图容器 -->
        <div ref="lineContainer" class="line-chart-container"></div>
    </div>
</template>

<script>
import { Line } from '@antv/g2plot';
// 引入Title组件（确保路径正确）
import Title from './Title.vue';

export default {
    // 注册Title组件
    components: { Title },
    data() {
        return {
            title: '监测点信息',
            lineChart: null, // 存储图表实例
            // 折线图数据
            chartData: [
                { Date: '2021-10-01', rating: 1 },
                { Date: '2021-10-02', rating: 3 },
                { Date: '2021-10-03', rating: 8 },
                { Date: '2021-10-04', rating: 12 },
                { Date: '2021-10-05', rating: 30 },
            ]
        };
    },
    methods: {
        // 初始化折线图
        initLineChart() {
            // 确保容器存在
            const container = this.$refs.lineContainer;
            if (!container) {
                console.error('折线图容器不存在，请检查ref="lineContainer"');
                return;
            }

            // 销毁已存在的图表实例
            if (this.lineChart) {
                this.lineChart.destroy();
            }

            // 创建折线图实例
            this.lineChart = new Line(container, {
                data: this.chartData,
                padding: 'auto',
                xField: 'Date',
                yField: 'rating',
                reflect: 'y',
                // 禁用自动适配，防止无限放大
                autoFit: false,
                xAxis: {
                    position: 'top',
                    label: {
                        style: {
                            fill: '#fff' // 确保在深色背景下可见
                        }
                    },
                    line: {
                        style: {
                            stroke: '#4E5969'
                        }
                    }
                },
                yAxis: {
                    label: {
                        style: {
                            fill: '#fff'
                        }
                    },
                    line: {
                        style: {
                            stroke: '#4E5969'
                        }
                    }
                },
                point: {
                    size: 5,
                    style: {
                        fill: '#fff',
                        stroke: '#165DFF',
                        lineWidth: 2
                    }
                },
                line: {
                    style: {
                        stroke: '#165DFF',
                        lineWidth: 2
                    }
                },
                tooltip: {
                    domStyles: {
                        'g2-tooltip': {
                            background: '#1D2129',
                            color: '#fff',
                            border: 'none'
                        }
                    }
                }
            });

            // 设置固定尺寸
            const { clientWidth, clientHeight } = container;
            this.lineChart.changeSize(clientWidth, clientHeight);
            this.lineChart.render();
        },

        // 处理窗口大小变化
        handleResize() {
            if (this.lineChart && this.$refs.lineContainer) {
                const { clientWidth, clientHeight } = this.$refs.lineContainer;
                if (clientWidth > 0 && clientHeight > 0) {
                    this.lineChart.changeSize(clientWidth, clientHeight);
                }
            }
        }
    },
    mounted() {
        // 确保DOM加载完成后初始化图表
        this.$nextTick(() => {
            this.initLineChart();
        });

        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 清理资源
        window.removeEventListener('resize', this.handleResize);
        if (this.lineChart) {
            this.lineChart.destroy();
        }
    }
};
</script>

<style lang="less" scoped>
.monitoring-point-container {
    width: 100%;
    height: 320px; /* 固定总高度，防止无限放大 */
    padding: 10px;
    box-sizing: border-box;
    background: #0F172A; /* 深色背景 */
    overflow: hidden;
}

.line-chart-container {
    width: 100%;
    height: 260px; /* 固定图表高度 */
    overflow: hidden;
}
</style>
    